.vs-violation-type {
  box-sizing: border-box;
  .vtc-do {
    box-sizing: border-box;
    &__text {
      padding-top: 10px;
      box-sizing: border-box;
      text-align: center;
      font-family: PingFangSC-Semibold;
      font-size: 20px;
      color: #ffffff;
      letter-spacing: 0;
      text-align: center;
      &-num {
        font-family: antonio-bold;
        font-size: 20px;
        color: #ffffff;
        letter-spacing: 1.25px;
        text-align: center;
      }
    }
    .vtc-do__round-main {
      position: relative;
      .vtc-do__round-r-line {
        position: absolute;
        top: 15px;
        left: 80px;
        width: 100px;
        transform: rotate(-8deg);
        border-top: 1px dashed rgba(255, 255, 255, 0.7);
      }
      .vtc-do__round-l-line {
        position: absolute;
        top: 15px;
        right: 80px;
        width: 100px;
        transform: rotate(8deg);
        border-top: 1px dashed rgba(255, 255, 255, 0.7);
      }
    }
    &__round {
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      margin-top: 5px;
      &-s {
        position: relative;
        background-image: url("~@/assets/images/visual-screen/vtc-round-s-boder.png");
        background-repeat: no-repeat;
        height: 34px;
        width: 34px;
        z-index: 10;

        &-sc {
          background-image: url("~@/assets/images/visual-screen/vtc-round-s-sc.png");
          background-repeat: no-repeat;
          background-position: 80% 50%;
          height: 34px;
          width: 34px;
          z-index: 11;
        }
        &_inc {
          position: absolute;
          top: 26%;
          left: 26%;
          transform: translate(-50%, -50%);
          background-image: url("~@/assets/images/visual-screen/vtc-round-sin-border.png");
          background-repeat: no-repeat;
          height: 16px;
          width: 16px;
        }
        &_cle {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-image: url("~@/assets/images/visual-screen/vtc-round-sin-cle.png");
          background-repeat: no-repeat;
          background-position: 50% 50%;
          height: 34px;
          width: 34px;
        }
      }
      &-center {
        height: 48px;
        width: 48px;

        position: relative;
        .vtc-do__round-center-sc {
          background-image: url("~@/assets/images/visual-screen/vtc-round-bin-cle.png");
          background-repeat: no-repeat;
          height: 48px;
          width: 48px;
        }
        .vtc-do__round-center_inc {
          position: absolute;
          top: 0%;
          left: 0%;
          transform: translate(-50%, -50%);
          background-image: url("~@/assets/images/visual-screen/vtc-round-b-sc.png");
          background-repeat: no-repeat;
          background-position: 90% 80%;
          height: 48px;
          width: 48px;
        }
      }

      .vtc-do__round-s-sc-l {
        -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 1s;
        -moz-transition-property: -moz-transform;
        -moz-transition-duration: 1s;
        -webkit-animation: vs-rotate 3s linear infinite;
        -moz-animation: vs-rotate 3s linear infinite;
        -o-animation: vs-rotate 3s linear infinite;
        animation: vs-rotate 3s linear infinite;
      }
      .vtc-do__round-s_inc-l {
        -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 1s;
        -moz-transition-property: -moz-transform;
        -moz-transition-duration: 1s;
        -webkit-animation: vs-rotate-reverse 2s linear infinite;
        -moz-animation: vs-rotate-reverse 2s linear infinite;
        -o-animation: vs-rotate-reverse 2s linear infinite;
        animation: vs-rotate-reverse 2s linear infinite;
      }
      .vtc-do__round-s-sc-r {
        -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 1s;
        -moz-transition-property: -moz-transform;
        -moz-transition-duration: 1s;
        -webkit-animation: vs-rotate-reverse 2.5s linear infinite;
        -moz-animation: vs-rotate-reverse 2.5s linear infinite;
        -o-animation: vs-rotate-reverse 2.5s linear infinite;
        animation: vs-rotate-reverse 2.5s linear infinite;
      }
      .vtc-do__round-s_inc-r {
        -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 1s;
        -moz-transition-property: -moz-transform;
        -moz-transition-duration: 1s;
        -webkit-animation: vs-rotate 2s linear infinite;
        -moz-animation: vs-rotate 2s linear infinite;
        -o-animation: vs-rotate 2s linear infinite;
        animation: vs-rotate 2s linear infinite;
      }
      .vtc-do__round-b_inc-l {
        -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 1s;
        -moz-transition-property: -moz-transform;
        -moz-transition-duration: 1s;
        -webkit-animation: vs-rotate 3s linear infinite;
        -moz-animation: vs-rotate 3s linear infinite;
        -o-animation: vs-rotate 3s linear infinite;
        animation: vs-rotate 3s linear infinite;
      }

      .vtc-do__round-b-sc-l {
        -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 1s;
        -moz-transition-property: -moz-transform;
        -moz-transition-duration: 1s;
        -webkit-animation: vs-rotate-reverse 1.5s linear infinite;
        -moz-animation: vs-rotate-reverse 1.5s linear infinite;
        -o-animation: vs-rotate-reverse 1.5s linear infinite;
        animation: vs-rotate-reverse 1.5s linear infinite;
      }
    }
    &__to-top {
      position: relative;
      text-align: center;
      margin: 10px 0 0;
      .vt-to-top_one {
        position: absolute;
        top: 0;
        -webkit-animation: vs-color-change-reverse 1.5s infinite;
        -moz-animation: vs-color-change-reverse 1.5s infinite;
        -o-animation: vs-color-change-reverse 1.5s infinite;
        -ms-animation: vs-color-change-reverse 1.5s infinite;
        animation: vs-color-change-reverse 1.5s infinite;
      }
      .vt-to-top_two {
        -webkit-animation: vs-color-change 1.5s infinite;
        -moz-animation: vs-color-change 1.5s infinite;
        -o-animation: vs-color-change 1.5s infinite;
        -ms-animation: vs-color-change 1.5s infinite;
        animation: vs-color-change 1.5s infinite;
      }
    }
  }
}
